<template>
  <a-table :dataSource="dataSource" :columns="tableData" :pagination="false">
    <template #bodyCell="{ index, column }">
      <template v-if="column.dataIndex === 'sku_name'">
        <a-form-item label="" :name="['goods_sku', index, 'sku_name']" :rules="[{ required: true, message: '请输入名称' }]">
          <a-input v-model:value="dataSource[index].sku_name" placeholder="请输入名称"></a-input>
        </a-form-item>
      </template>
      <template v-if="column.dataIndex === 'goods_price'">
        <a-form-item label="" :name="['goods_sku', index, 'goods_price']"
          :rules="[{ required: true, message: '请输入商品价格' }]">
          <a-input-number style="width: 150px" v-model:value="dataSource[index].goods_price" min="0" @change="handleInput"
            placeholder="商品价格"></a-input-number>
        </a-form-item>
      </template>
      <template v-if="column.dataIndex === 'cost_price'">
        <a-form-item label="" :name="['goods_sku', index, 'cost_price']" :rules="[{ required: true, message: '请输入成本价' }]">
          <a-input-number style="width: 150px" v-model:value="dataSource[index].cost_price" min="0"
            placeholder="成本价"></a-input-number>
        </a-form-item>
      </template>
      <template v-if="column.dataIndex === 'market_price'">
        <a-form-item label="" :name="['goods_sku', index, 'market_price']"
          :rules="[{ required: true, message: '请输入市场价' }]">
          <a-input-number style="width: 150px" v-model:value="dataSource[index].market_price" min="0"
            placeholder="市场价" @change="handleInput"></a-input-number>
        </a-form-item>
      </template>
      <template v-if="column.dataIndex === 'stock_num'">
        <a-form-item label="" :name="['goods_sku', index, 'stock_num']" :rules="[{ required: true, message: '请输入库存' }]">
          <a-input-number style="width: 150px" v-model:value="dataSource[index].stock_num" min="0"
            placeholder="库存"></a-input-number>
        </a-form-item>
      </template>
      <template v-if="column.dataIndex === 'sku_img'">
        <a-form-item label="" :name="['goods_sku', index, 'sku_img']">
          <div class="sku-uploader" @click="selectSkuImg(index)" v-if="dataSource[index].sku_img == ''">
            <plus-outlined></plus-outlined>
            <div class="ant-upload-text">上传</div>
          </div>
          <div v-else>
            <img @click="selectSkuImg(index)" :src="dataSource[index].sku_img" :height="54" :width="54" class="img" />
            <div @click="delSkuImg(index)">
              <a-button type="link">删除</a-button>
            </div>
          </div>
        </a-form-item>
      </template>
      <template v-if="column.dataIndex === 'actions'">
        <a-space size="small">
          <a-popconfirm title="你确定要删除吗?" ok-text="确认" cancel-text="取消" @confirm="handleDel(index)">
            <a-button type="link" danger>删除</a-button>
          </a-popconfirm>
        </a-space>
      </template>
    </template>
  </a-table>
</template>
<script setup>
import { reactive } from "vue";
import { PlusOutlined } from "@ant-design/icons-vue";

const props = defineProps({
  dataSource: {
    type: Array,
    default: () => {
      return [];
    },
  },
});
const emits = defineEmits(["delete-img", "select-img", "delete-sku","expend-price"]);
const tableData = [
  {
    title: "名称",
    dataIndex: "sku_name",
    key: "sku_name",
  },
  {
    title: "商品价格",
    dataIndex: "goods_price",
    key: "goods_price",
  },
  {
    title: "市场价",
    dataIndex: "market_price",
    key: "market_price",
  },
  {
    title: "成本价",
    dataIndex: "cost_price",
    key: "cost_price",
  },
  {
    title: "库存",
    dataIndex: "stock_num",
    key: "stock_num",
  },
  {
    title: "图片",
    dataIndex: "sku_img",
    key: "sku_img",
  },
  {
    title: '操作',
    dataIndex: 'actions',
    fixed: 'right',
    width: 80
  }
]
const delSkuImg = (i) => {
  emits("delete-img", i);
};
const selectSkuImg = (i) => {
  emits("select-img", i);
};
const handleDel = (i) => {
  emits("delete-sku", i);
}
const handleInput=()=>{
  let goodsPirce=props.dataSource[0].goods_price
  let marketPirce=props.dataSource[0].market_price
  if (goodsPirce&&marketPirce){
    emits("expend-price", (marketPirce-goodsPirce).toFixed(2));
  }
}
</script>
<style lang="scss" scoped>
.sku-uploader {
  width: 54px;
  height: 54px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px dashed #999;
  cursor: default;
  margin-top: -8px;
}

.img {
  height: 54px !important;
}
</style>
  